<template>
  <div>
    <el-form :inline="true" style="width: 100%;margin-bottom: -10px;margin-top: -10px;" label-width="80px">
      <el-form-item>
        <el-button size="mini" icon="el-icon-back" type="success" @click="returnRoomChange">我的考场</el-button>
      </el-form-item>
      <el-form-item>
        <el-input size="mini" v-model="requestData.map.ep_name" style="width: 200px;" placeholder="考卷标题"></el-input>
        <el-select v-model="state" placeholder="考试状态" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button size="mini" type="primary" @click="searchInfoData">查询</el-button>
        <el-button size="mini" @click="restartInfoData">重置</el-button>
      </el-form-item>
      <el-form-item>
        <div>
          <el-tag type="success" style="font-size: 15px;">
            <label style="color: black">考场名称:</label><label>{{testRoomData.tr_name}}</label>&nbsp;&nbsp;&nbsp;
            <label style="color: black">考卷数:</label><label>{{testRoomData.roomPaperNum}}</label>&nbsp;&nbsp;&nbsp;
            <label style="color: black">人数:</label><label>{{testRoomData.userNum}}</label>&nbsp;&nbsp;&nbsp;
            <label style="color: black">创建时间:</label><label>{{testRoomData.tr_time|timeFilter}}</label>
          </el-tag>
        </div>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" :span="24">
      <!--试题信息-->
      <el-col :span="12">
        <div class="block">
          <el-timeline>
            <template v-for="obj in roomPaperList">
              <el-timeline-item :timestamp="obj.rp_time|timeFilter" placement="top" color="#0bbd87">
                <el-card>
                  <h3>{{obj.examinationPaper.ep_name}}</h3>
                  <p style="margin-top: 25px;">{{obj.examinationPaper.ep_describe}}</p>
                  <div style="margin-top: 15px;">
                    <label>总分:<label style="color: green;">{{obj.examinationPaper.ep_fraction}}</label></label>
                    <label style="margin-left: 35px;">时间(分钟):<label style="color: green;">{{obj.examinationPaper.ep_test_time}}</label></label>
                    <label style="margin-left: 35px;">考试状态:<label>
                      <el-tag v-if="obj.rp_state == 0" size="mini">未开始</el-tag>
                      <el-tag type="success" v-if="obj.rp_state == 1" size="mini">进行中</el-tag>
                      <el-tag type="info" v-if="obj.rp_state == 2" size="mini">已结束</el-tag>
                    </label></label>
                  </div>
                  <div style="margin-top: 15px;">
                    <label>开始时间:<label style="color: grey;">{{obj.ep_start_time|timeFilter}}</label></label>
                    <label style="margin-left: 30px;">结束时间:<label style="color: grey;">{{obj.ep_end_time|timeFilter}}</label></label>
                  </div>
                  <div style="margin-top: 15px;">
                    <template v-if="obj.isStartDisable == true">
                      <el-button plain size="mini" type="primary" :disabled="obj.isStartDisable" @click="startTestClick(obj)">开始考试</el-button>
                    </template>
                    <template v-if="obj.isStartDisable == false">
                      <el-button v-if="obj.test_status == 0" plain size="mini" type="primary" @click="startTestClick(obj)">开始考试</el-button>
                      <el-button v-if="obj.test_status == 1" plain size="mini" type="primary" :disabled="true" @click="startTestClick(obj)">开始考试</el-button>
                    </template>

                    <el-button v-if="obj.rp_state == 2" type="success" plain size="mini" @click="lookExamination(obj)">查看考卷</el-button>
                    <el-button v-if="obj.rp_state != 0" type="info" plain size="mini"  :disabled="obj.isLookPaperDisable" @click="scoreStatistics(obj)">成绩查看</el-button>
                    <label v-if="obj.test_status == 1" style="font-size: 15px;color: green;float: right;"><i class="el-icon-success"></i>已完成</label>
                  </div>
                </el-card>
              </el-timeline-item>
            </template>
          </el-timeline>
        </div>
      </el-col>
      <!--成绩查看-->
      <el-col :span="12" v-if="lookScore.isShowLookScore">
        <el-timeline-item timestamp="成绩查看" placement="top" color="green">
          <el-card>
            <div style="text-align: center">
              <h4>{{lookScore.title}}</h4>
              <p>{{lookScore.desc}}</p>
            </div>
            <div class="chart" ref="myEchartPillar" style="height:250px;">
              <div>
                <p style="margin-top: 20px;"><label style="color: grey">用户ID：</label>{{myTestResult.user.user_id}}</p>
                <p style="margin-top: 30px;"><label style="color: grey">昵称：</label>{{myTestResult.user.user_nick_name}}</p>
                <p style="margin-top: 30px;"><label style="color: grey">分数：</label>{{myTestResult.tsr_score}}</p>
                <p style="margin-top: 30px;"><label style="color: grey">交卷时间：</label>{{myTestResult.tsr_text_time}}</p>
              </div>
              <div>
                <el-table  :data="myTestResult.resultList" style="width: 100%">
                  <el-table-column align="center" label="单选题得分" prop="choose"></el-table-column>
                  <el-table-column align="center" label="多选题得分" prop="chooses"></el-table-column>
                  <el-table-column align="center" label="判断题得分" prop="judgment"></el-table-column>
                  <el-table-column align="center" label="填空题得分" prop="fillBanks"></el-table-column>
                </el-table>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top" color="green" style="margin-top: -20px;">
          <el-card>
            <div style="text-align: center">
            </div>
            <div id="tonJiTable">
              <el-table  :data="tableData" style="width: 100%">
                <el-table-column align="center" label="考试人数" prop="peopleNum"></el-table-column>
                <el-table-column align="center" label="单选题平均分" prop="choose"></el-table-column>
                <el-table-column align="center" label="多选题平均分" prop="chooses"></el-table-column>
                <el-table-column align="center" label="判断题平均分" prop="judgment"></el-table-column>
                <el-table-column align="center" label="填空题平均分" prop="fillBanks"></el-table-column>
                <el-table-column align="center" label="平均分" prop="score"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-timeline-item>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[3, 5]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <start-test v-if="isShowStartTestDialog" :isShowStartTestDialog="isShowStartTestDialog" :testInfoObj="testInfoObj" @closeDialog="closeDialog"></start-test>
  </div>
</template>
<script>
  import{selectTestRoomById,selectRoomPaperByTrId,selectRoomPaperByTrIdAndUser,getScoreStatistics,getScoreStatisticsByRpIdAndId} from '@/api/invigilate'
  import startTest from './startTest.vue'
  export default{
    components: {
        startTest
    },
    created(){
      this.getTestRoomData();
      this.getRoomPaper();
    },
    data(){
      return {
        testRoomData:{},
        roomPaperList:[],

        tableData:[],

        myTestResult:{
          user:{
            user_id:'',
            user_name:'',
            user_nick_name:"",
          },
          tsr_score:0,
          tsr_text_time:"",
          resultList:[
            {choose:0,chooses:0,judgment:0,fillBanks:0}
          ]
        },

        state:'',
        isShowStartTestDialog:false,

        isShowRoomPaperDialog:false,
        roomPaperInfo:null,

        testInfoObj:null,

        options:[
          {label:"未开始",value:0},
          {label:"进行中",value:1},
          {label:"已结束",value:2}
        ],

        lookScore:{
          title:"更新 Github 模板",
          desc:"王小虎 提交于 2018/4/2 20:46",
          isShowLookScore:false
        },

        pageInfo:{
          page:1,//页数
          size:3, //页面大小
          total:0 //页总数
        },
        requestData:{
          pageSize:3,
          pageNum:1,
          map:{
            tr_id:parseInt(this.$route.params.id),
            ep_name:"",
            rp_state:-1,
          }
        }
      }
    },

    filters:{
      timeFilter(time){
        if(typeof time === "string"){
          return time.substr(0,time.length  -2);
        }
        return time;
      }
    },

    methods:{
      //获取考场信息
      getTestRoomData(){
        selectTestRoomById({tr_id:parseInt(this.$route.params.id)}).then(res=>{
          if(res.code == 200){
            this.testRoomData = res.data;
          }
        })
      },

      //查询考场中的考题信息
      getRoomPaper(){
        if(this.state == ''){
          this.requestData.map.rp_state = -1;
        }else{
          this.requestData.map.rp_state = parseInt(this.state);
        }
        selectRoomPaperByTrIdAndUser(this.requestData).then(res=>{
          if(res.code == 200){
            //console.log(res);
            for(let obj of res.data.data){
              if(obj.rp_state === 0){
                  obj.isStartDisable = true;
                  obj.isLookPaperDisable = true;
              }else{
                   if(obj.rp_state === 1){
                     obj.isStartDisable = false;
                     obj.isLookPaperDisable = true;
                   }else{
                     obj.isLookPaperDisable = false;
                     obj.isStartDisable = true;
                   }
              }
            }
            this.roomPaperList = res.data.data;
            this.pageInfo.total = res.data.total;
          }
        })
      },

      //查看考卷
      lookExamination(obj){
        this.$router.push({ path: '/invigilate/examinationPaper/component/lookExaminationPaper',query:{ep_id:obj.ep_id,type:"sLook",id:parseInt(this.$route.params.id)}});
      },

      //成绩统计
      scoreStatistics(obj){
        this.lookScore.title = obj.examinationPaper.ep_name;
        this.lookScore.desc = obj.examinationPaper.ep_describe;
        this.lookScore.isShowLookScore = true;
        this.myTestResult.resultList = [];
        this.myTestResult.tsr_score = 0;
        this.myTestResult.tsr_text_time = "";
        getScoreStatisticsByRpIdAndId({rp_id:obj.rp_id}).then(res=>{
            if(res.code == 200){
                let info = {};
                for(let obj of res.data.testResultList){
                    if(obj.tr_type == 1){
                      info.choose = obj.tr_score;
                    }else if(obj.tr_type == 2){
                      info.chooses = obj.tr_score;
                    }else if(obj.tr_type == 3){
                      info.judgment = obj.tr_score;
                    }else if(obj.tr_type == 4){
                      info.fillBanks = obj.tr_score;
                    }
                }
              this.myTestResult = res.data;
              this.myTestResult.resultList = [info]
            }
        });

        getScoreStatistics({rp_id:obj.rp_id}).then(res=>{
          if(res.code == 200){
            this.tableData = [res.data];
          }
        })
      },

      //开始考试
      startTestClick(obj){
          this.testInfoObj = obj;
          this.isShowStartTestDialog = true;
      },

      closeDialog(type){
          if(type == "start"){
              this.isShowStartTestDialog = false;
          }
      },

      searchInfoData(){
        this.getRoomPaper();
      },

      restartInfoData(){
        this.requestData.map.ep_name = "";
        this.requestData.map.rp_state = -1;
        this.state = "";
        this.getRoomPaper();
      },

      returnRoomChange(){
        this.$router.push({ path: '/examinee/room/room'});
      },

      //每页的条数发生改变时调用
      handleSizeChange(size){
        this.requestData.pageSize = size;
        this.pageInfo.size = size;
        this.getRoomPaper();
      },

      //页数发生改变时调用
      handleCurrentChange(page){
        this.requestData.pageNum = page;
        this.pageInfo.page = page;
        this.getRoomPaper();
      },
    }
  }
</script>
